<template>
	<div class="zh-batch-upload" v-loading="loading.status" :element-loading-text="loading.txt">
        <nav-header></nav-header>
		<div class="zh-import-comter">			
				<el-button plain @click="downloadDemo()">下载模板</el-button>
			    <uploader 
                    :options="uploadOptions" 
                    :autoStart="false" ref="uploader" 
                    :file-status-text="statusText" 
                    @files-submitted="fileSubmit" 
                    @file-removed="fileRemoved" 
                    @file-success="fileSuccess" 
                    @file-error="fileFail"  
                    class="uploader-example"
                >
				    <uploader-unsupport></uploader-unsupport>
				    <uploader-btn :directory="false" :single="true" :attrs="attrs" v-if="selectFileShow">选择文件</uploader-btn>
				    <uploader-list  v-if="!selectFileShow"></uploader-list>
				</uploader>
				<el-button type="primary" v-if="!selectFileShow" @click="fileUpload" style="margin-top: 10px;">确定导入</el-button>
		</div>
		<div class="zh-import-text">
			<p>注意事项: </p>
			<p>1、格式支持：只支持 zip 格式。 </p>
			<p>2、Excel表数据从的第二行开始有效。其中<span>视频名称、授课老师账号、视频信息、学段、年级</span>为必填项，不能错误，否则会导致失败。</p>
		</div>
		<div class="zh-import-table">
			<p>例：</p>
			<div class="zh-table">
				<div class="zh-table-contents">
					<el-table
					    :data="importData"
					    border
					    style="width: 100%">
					    <el-table-column
					      prop="1"
					      label="视频名称"
					      align="center"
					      show-overflow-tooltip
					      >
					    </el-table-column>
					    <el-table-column
					      prop="2"
					      label="授课老师账号"
					      align="center"
					      show-overflow-tooltip
					      >
					    </el-table-column>
					    <el-table-column
					      prop="3"
					      label="视频信息"
					      align="center"
					      show-overflow-tooltip
					      >
					    </el-table-column>
                        <el-table-column
					      prop="4"
					      label="学段"
					      align="center"
					      show-overflow-tooltip
					      >
					    </el-table-column>
                        <el-table-column
					      prop="5"
					      label="年级"
					      align="center"
					      show-overflow-tooltip
					      >
					    </el-table-column>
					    <el-table-column
					      prop="6"
					      label="科目"
					      align="center"
					      show-overflow-tooltip
					      >
					    </el-table-column>
					    <el-table-column
					      prop="7"
					      label="版本"
					      align="center"
					      show-overflow-tooltip
					      >
					    </el-table-column>
					    <el-table-column
					      prop="8"
					      label="教材"
					      align="center"
					      show-overflow-tooltip
					      >
					    </el-table-column>
                        <el-table-column
					      prop="9"
					      label="章"
					      align="center"
					      show-overflow-tooltip
					      >
					    </el-table-column>
                        <el-table-column
					      prop="10"
					      label="节"
					      align="center"
					      show-overflow-tooltip
					      >
					    </el-table-column>
                        <el-table-column
					      prop="11"
					      label="关键字（逗号隔开）"
					      align="center"
					      show-overflow-tooltip
					      >
					    </el-table-column>
                        <el-table-column
					      prop="12"
					      label="视频简介"
					      align="center"
					      show-overflow-tooltip
					      >
					    </el-table-column>
                        <el-table-column
					      prop="13"
					      label="课程须知"
					      align="center"
					      show-overflow-tooltip
					      >
					    </el-table-column>
                        <el-table-column
					      prop="14"
					      label="是否下载"
					      align="center"
					      show-overflow-tooltip
					      >
					    </el-table-column>
					</el-table>
				</div>
			</div>
		</div>
	</div>
</template>
<script>
    import {uploaderFileFail, longTimeMessage} from './../../../tools/tool';
    
	export default {
	    data() {
		    return {
                loading:{
					status:false,
					txt:'获取数据...',
				},
				messageObj:{},
		    	statusText: {
			      	success: '上传成功',  
			      	error: '上传出错',  
			     	uploading: '正在上传...',  
			      	paused: '暂停',  
			      	waiting: '等待上传'  
				},
				selectFileOrNot:false,  //是否选中文件
			    uploadOrNot:false, 		//是否已经上传
			    uploadInfo:{
					file_name:'',
					file_path:'',
					file_size:0
				},
				attrs: {
			      	// accept: ['application/vnd.ms-excel','application/vnd.openxmlformats-officedocument.spreadsheetml.sheet']
			    },
		    	uploadOptions: {
                      target: this.BASE_URL + '/api/resource/res_upload',
			          testChunks: false,
			          headers:{Authorization : `Bearer `+this.$g.access_token},
			    },
		        fileList: [],
	            rules: {
	      		},
	      		selectFileShow: true,//是否显示选择文件按钮
				uploadRetryTimes: 100,//文件最大重传次数
				importData: [
                    {
                        1: "123.MP4",
                        2: "lina",
                        3: "公开课",
                        4: "小学",
                        5: "一年级",
                        6: "语文",
                        7: "",
                        8: "",
                        9: "",
                        10: "",
                        11: "",
                        12: "111",
                        13: "ccccc",
                        14: "是",
                    },
                    {
                        1: "123.MP4",
                        2: "lina",
                        3: "公开课",
                        4: "小学",
                        5: "一年级",
                        6: "语文",
                        7: "",
                        8: "",
                        9: "",
                        10: "",
                        11: "",
                        12: "111",
                        13: "ccccc",
                        14: "是",
                    },
                    {
                        1: "123.MP4",
                        2: "lina",
                        3: "公开课",
                        4: "小学",
                        5: "一年级",
                        6: "语文",
                        7: "",
                        8: "",
                        9: "",
                        10: "",
                        11: "",
                        12: "111",
                        13: "ccccc",
                        14: "是",
                    }
                ],                
	      	}
	    },
	    methods: {
	    	downloadDemo(){
                this.export_excel('api/video/video_zip_demo', {}, '批量上传模板', 'zip');
	    	},
			submitForm(formName) {
				this.$refs[formName].validate((valid) => {
					if (valid) {
						if( this.selectFileOrNot ){
							this.fileUpload();
						}else{
							this.resourceSave();
						}
					} else {
						return false;
					}
				});
			},
	        resourceSave(){
				let resourceParam = {};
				if( this.uploadOrNot ) {
					resourceParam.path = this.uploadInfo.file_path;
				}
            	let success = ( data=>{
                    this.loading.status  = false;
            		this.$message.success(data.msg);
                    
                    setTimeout(() => {
                        this.$router.push('/resources/video/video-list');
                    }, 1000);
            	})
            	let fail = (res => {
                    this.loading.status  = false;
                    
                    longTimeMessage(this, res, 15000);
            	}) 
            	
                this.$ajax.post('api/video/vue_video_zip', resourceParam, {func: {success: success, fail: fail}})	
			},
			//上传成功的事件  
			fileSuccess (rootFile, file, message, chunk) { 
				this.selectFileShow = true;
                var mess = eval('(' + message + ')');
                mess = handleResponseData( mess );
                
			 	if(parseInt( mess.data.status ) ===1 ){
			  		this.uploadOrNot = true;
			  		this.uploadInfo.file_name = mess.data.file_name;
			  		this.uploadInfo.file_path = mess.data.file_path;
			  		this.uploadInfo.post_fix = mess.data.post_fix;
			  		this.resourceSave();
                }
                
                this.loading.status  = true;
			    Uploader.removeFile(file);
			},
			fileFail(rootFile, file, message, chunk) {
                uploaderFileFail(this, Uploader, file, message);
			},
			//文件添加到上传队列后触发 -- 过滤文件格式
			fileSubmit(files, fileList, event){
				for (var i = 0 ; i < fileList.length ; i++ ) {
                    let temp = fileList[i].name.toLowerCase().split('.');
                    let tempname = temp[temp.length - 1];

					if( tempname != 'zip'){
						this.$message.warning('只允许上传 ZIP 格式的文件')
						Uploader.removeFile( fileList[i] );
					}else{
						if( Uploader.fileList.length  > 1  ){
							Uploader.removeFile( Uploader.fileList[0] );
                        }
                        
						this.uploadInfo.file_size = fileList[i].size;
						this.selectFileOrNot = true;
						this.selectFileShow = false;
					}
				}
			},
			fileRemoved(file){
				this.selectFileOrNot = false;
				this.selectFileShow = true;
			},
			fileUpload(){
                // 开始或继续上传
				Uploader.upload();
			},
	    },
	    mounted () {  
            // 获取uploader对象  
            // 获取上传成功之后的response
            this.$nextTick(() => {  
                window.Uploader = this.$refs.uploader.uploader  
            })  
		},
		destroyed(to, from, next) {
			this.$message.closeAll();
		},
	}
</script>
<style lang="scss">
	.zh-batch-upload {
		.zh-import-comter {
			margin-top: 20px;
		}
		.uploader-example {
			margin-top: 20px;
		}
		.zh-import-text {
			font-size: 12px;
		    color: #999;
		    line-height: 30px;
		    margin: 20px;
		    p {
		    	margin: 0;
		    }
		    span {
			    color: red;
			}
		}
		.zh-import-table {
			p {
				font-size: 16px;
				margin-bottom: 20px;
			}
		}
		.uploader-list {
		    .uploader-file-pause {
		      display: none !important;
		    }
		    .uploader-file-status {
		      text-indent: 0;
		    }
 		 }
	}
</style>